<template>
  <div class="head">
    <div class="title1">
      <div class="tex1">
        <button
          v-for="item in tabb"
          :key="item.id"
          :class="id == item.id ? 'active' : ''"
          class="text1"
          @click="tab(item.id)"
        >
          {{ item.val }}
        </button>
      </div>
      <div class="tex2">
        结算网点
        <el-select
          v-model="value"
          class="input"
          placeholder="请选择"
          @change="handleOptionChange"
        >
          <el-option
            v-for="item in List"
            :key="item.id"
            :label="item.networkName"
            :value="item.networkName"
          />
        </el-select>
      </div>
    </div>
    <div class="title2">
      <el-row :gutter="20">
        <el-col :span="12">
          <div v-if="TendencyList.length > 0" class="tex1">
            <div class="text1">
              <img class="img" src="@/static/image/gengd.png" alt="" />
              <div class="text2">各费用项收支</div>
              <div class="text3">
                <div class="text4">
                  合计：<span class="text5">{{
                    TendencyList[0].totalAmount
                  }}</span>
                </div>
                <div class="text4">
                  收入：<span class="text5">{{
                    TendencyList[0].totalIncome
                  }}</span>
                </div>
                <div class="text4">
                  支出：<span class="text5">{{
                    TendencyList[0].totalExpend
                  }}</span>
                </div>
              </div>
            </div>
            <div style="display: flex; flex-wrap: wrap">
              <div
                v-for="(item, index) in TendencyList"
                :key="index"
                class="text6"
                :class="id3 == index + 1 ? 'active' : ''"
                @click="tab2(index + 1)"
              >
                <div class="text7">
                  {{ item.typeName }}
                  <img class="image1" src="@/static/image/tishi.png" />
                </div>
                <div class="text8">
                  环比<i
                    style="color: red; margin-left: 11px"
                    class="el-icon-caret-top"
                  /><span style="color: red">76.00%</span>
                </div>
                <div class="text8 text10">
                  收入：<span class="text9">{{ item.income }}</span
                  >元
                </div>
                <div class="text8 text10">
                  支出：<span class="text9">{{ item.expend }}</span
                  >元
                </div>
              </div>
            </div>
          </div>
          <div v-else class="tex1">
            <load />
          </div>
        </el-col>
        <el-col :span="12">
          <div v-if="sevenlist.length > 0" class="tex1">
            <div class="tow1">
              <img class="img1" src="@/static/image/gengd.png" alt="" />
              <div class="text1">近七天趋势</div>
            </div>
            <div id="mychart" ref="mychart" class="mychart" />
          </div>
          <div v-else class="tex1">
            <load />
          </div>
        </el-col>
      </el-row>
    </div>
    <div :style="{ height: height + 'px' }" class="title3">
      <el-row>
        <el-col :span="24">
          <div>
            <div class="tex">
              <div class="text1">
                <div style="display: flex; flex-wrap: wrap">
                  <div class="text2">
                    <el-select
                      v-model="form.dateType"
                      placeholder="请选择时间"
                      style="width: 150px; height: 36px"
                    >
                      <el-option
                        v-for="item in timee"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-date-picker
                      v-model="form.Time"
                      value-format="yyyy-MM-dd"
                      class="input1"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="picker"
                    />
                  </div>
                  <div class="text2">
                    网点层级<el-select
                      v-model="form.type"
                      class="input1"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div class="text2">
                    费用大类<el-select
                      v-model="form.costBigKindId"
                      class="input1"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                      />
                    </el-select>
                  </div>
                </div>
                <div class="flex-button">
                  <el-button type="primary" round @click="inquire"
                    >查询</el-button
                  >
                  <el-button type="success" round @click="reset"
                    >重置</el-button
                  >
                  <el-button type="info" round @click="exportData"
                    >导出</el-button
                  >
                </div>
              </div>
            </div>
            <div class="tex1">
              <div class="text1">共{{ total }}项</div>
              <!-- <button
                v-if="id2 == false"
                style="border: 1px #fff solid; background-color: #fff"
                class="text2"
                @click="unfold"
              >
                收起 <i class="el-icon-arrow-up" />
              </button>
              <button
                v-else
                class="text2"
                style="border: 1px #fff solid; background-color: #fff"
                @click="unfold"
              >
                展开 <i class="el-icon-arrow-down" />
              </button> -->
            </div>
          </div>

          <div class="tex2">
            <el-table
              v-loading="loading"
              :data="tableData"
              border
              style="width: 100%"
              :header-cell-style="{ background: '#f6f6f6' }"
            >
              <el-table-column label="统计日期" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.collectDate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="结算网点" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.settleNetworkName }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="cbsisShow" label="承包区" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.settleNetworkNameId }}</span>
                </template>
              </el-table-column>
              <el-table-column label="费用大类" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.costBigKindId }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="khisShow" label="客户" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.networkClient }}</span>
                </template>
              </el-table-column>
              <el-table-column label="收入" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.collectIncome }}</span>
                </template>
              </el-table-column>
              <el-table-column label="支出" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.collectExpend }}</span>
                </template></el-table-column
              >
              <el-table-column label="合计金额" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.collectAmount }}</span>
                </template></el-table-column
              >
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="search(scope.row)"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div
              class="block"
              style="display: flex; justify-content: flex-end; margin-top: 20px"
            >
              <el-pagination
                :current-page="pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                prev-text="上一页"
                next-text="下一页"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  DataSummaryApi,
  CostBigKindApi,
  ChartData
} from '@/api/HqFinancePanel'
import { getOutletsList } from '@/api/dashboard'
import * as echarts from 'echarts'
import load from '@/components/loading.vue'
// import { logger } from 'runjs/lib/common'
// import { resetPwd } from '@/api/user'
import { exportDataWDZD } from '@/api/home'
export default {
  components: { load },
  data() {
    return {
      options: [],
      loading: false,
      options1: [
        {
          value: 1,
          label: '网点'
        },
        {
          value: 2,
          label: '承包区'
        },
        {
          value: 3,
          label: '客户'
        }
      ],
      tabb: [
        {
          val: '昨日',
          id: 1
        },
        {
          val: '本月',
          id: 2
        },
        {
          val: '上月',
          id: 3
        }
      ],
      khisShow: false,
      cbsisShow: false,
      value1: [],
      form: {
        costBigKindId: '', // 费用大类
        endTime: '', // 结束时间
        dateType: 0,
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '', // 开始时间
        type: 1 // 层级
      },
      chartForm: {
        collectType: 2,
        settleNetworkNameId: '辽宁盘锦公司',
        sevenMark: 'all'
      },
      List: [],
      TendencyList: [],
      value: '辽宁盘锦公司',
      kk: '',
      id: 2,
      id1: '1',
      id2: true,
      id3: 0,
      height: 142,
      height1: 100, // 622
      sjlData: [],
      Data: [],
      bjlData: [],
      balData: [],
      bjl2Data: [],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      xAxisData: [], // x轴时间
      shipments: [], // 寄件量
      disbursement: [], // 派费量
      income: [], // 收入
      outcome: [], // 支出
      // load: null,
      timee: [
        { value: 0, label: '扣付日期' },
        { value: 1, label: '会计日期' }
      ],
      sevenlist: []
    }
  },

  computed: {},

  created() {
    this.Tendency()
    this.getOutlets()
    this.CostBigKind()
  },
  mounted() {
  },
  beforeDestroy() {
    // this.load.close()
  },
  activated() {
    this.$store.state.app.wdzdmxtab = null
  },
  methods: {
    exportData() {
      if (this.form.startTime === '') {
        this.$message('请选择时间和网点层级')
        return
      } else {
        exportDataWDZD(this.form).then(res => {
          const url = window.URL.createObjectURL(new Blob([res]), { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', '网点账单.xlsx') // 设置下载的文件名
          document.body.appendChild(link)
          link.click()
          link.parentNode.removeChild(link)
        })
      }
    },
    search(data) {
      data['date'] = this.form.dateType
      data.startTime = this.form.startTime
      data.endTime = this.form.endTime
      this.$store.state.app.wdzdmxtab = data
      this.$router.push('/InvoiceBill')
    },
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.inquire()
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.inquire()
    },
    tab(id) {
      if (this.id === id) {
        return
      }
      this.TendencyList = []
      this.sevenlist = []
      this.id = id
      this.chartForm.collectType = this.id
      this.Tendency()
    },
    tab1(e) {
      this.id1 = e.target.id
    },
    tab2(id) {
      this.sevenlist = []
      if (this.id3 === id) {
        this.id3 = 0
        this.chartForm.sevenMark = 'all'
        this.Tendency()
      } else {
        this.id3 = id
        if (this.id3 < 3) {
          this.chartForm.sevenMark = this.id3 * 10
        } else if (this.id3 < 6) {
          this.chartForm.sevenMark = this.id3 * 10 + 10
        } else {
          this.chartForm.sevenMark = 'other'
        }
        this.Tendency()
      }
    },
    // 展开收起
    // unfold() {
    //   this.id2 = !this.id2
    //   if (this.height == 142) {
    //     this.height = 622
    //     this.height1 = 120
    //   } else {
    //     this.height = 142
    //     this.height1 = 100
    //   }
    // },
    chartInit() {
      const myChart = echarts.init(this.$refs.mychart) // 初始化

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['收入', '支出', '寄件量', '派费量']
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：元',
            min: 0,
            max: 60000,
            interval: 5000
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 0,
            interval: 0
          }
        ],
        series: [
          {
            name: '寄件量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元'
              }
            },
            data: this.shipments
          },
          {
            name: '派费量',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元'
              }
            },
            data: this.disbursement
          },
          {
            name: '收入',
            type: 'line',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元'
              }
            },
            data: this.income
          },
          {
            name: '支出',
            type: 'line',
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元'
              }
            },
            data: this.outcome
          }
        ]
      }

      option & myChart.setOption(option) // 渲染页面
    },
    handleOptionChange() {
      this.chartForm.settleNetworkNameId = this.value
      this.Tendency()
    },
    // 各费用项收支
    async Tendency() {
      // this.load = this.$loading({
      //   lock: true,
      //   text: 'Loading',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      const res = await ChartData(this.chartForm)
      if (res.code === 200) {
        this.TendencyList = res.data.card
        this.sevenlist = res.data.seven
        this.xAxisData = []
        this.shipments = []
        this.disbursement = []
        this.income = []
        this.outcome = []
        res.data.seven.forEach((el) => {
          this.xAxisData.push(el.collectDate)
          this.shipments.push(el.sentAmount)
          this.disbursement.push(el.levyAmount)
          this.income.push(el.totalIncome)
          this.outcome.push(el.totalExpend)
        })
      }
      this.$nextTick(() => {
        this.chartInit()
      })
      // this.load.close()
    },
    // 结算网点列表
    async getOutlets() {
      const res = await getOutletsList()
      this.List = res.data
      this.kk = res.data[0].networkName
    },
    // 获取开始结束日期
    picker(value) {
      if (value != null) {
        this.form.startTime = value[0]
        this.form.endTime = value[1]
      }
    },
    // 获取费用大类
    async CostBigKind() {
      const res = await CostBigKindApi()
      this.options = res.data
    },

    // 查询
    async inquire() {
      if (this.form.startTime === '') {
        this.$message('请选择时间')
        return
      }
      if (this.form.type === '') {
        this.$message('请选择网点层级')
        return
      }
      this.loading = true
      const res = await DataSummaryApi(this.form)
      this.loading = false
      if (res.code === 200) {
        this.tableData = res.data.data
        this.total = res.data.total
      } else {
        this.tableData = []
        this.total = 0
      }

      console.log('查询', res)
      if (this.form.type === 3) {
        this.khisShow = true
        this.cbsisShow = true
      } else if (this.form.type === 2) {
        this.khisShow = false
        this.cbsisShow = true
      } else {
        this.khisShow = false
        this.cbsisShow = false
      }
    },
    // 重置
    reset() {
      this.form = {
        costBigKindId: '', // 费用大类
        endTime: '', // 结束时间
        dateType: 0,
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '', // 开始时间
        type: 1 // 层级
      }
      if (this.form.Time) {
        this.form.Time = []
      }
    }
  }
}
</script>
<style
  scoped
  lang="scss"
>
.head {
  background-color: #f5f5f5;
  padding: 10px;
}

.title1 {
  height: 84px;
  background: #ffffff;
  border-radius: 8px;
  display: flex;

  .tex1 {
    display: flex;
    margin: 24px 30px 24px 30px;

    .text1 {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 600;
      width: 64px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      background: #ffffff;
      border: 1px solid #b4b4b4;
      color: #333333;
    }

    .active {
      background-color: #2087d0;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .tex2 {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 600;
    color: #666666;
    margin-top: 24px;

    .input {
      width: 286px;
      height: 36px;
      background: #ffffff;
      border-radius: 4px;
      margin-left: 12px;
    }
  }
}

.title2 {
  margin-top: 20px;

  .tex1 {
    height: 476px;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px 8px;

    .text1 {
      height: 58px;
      background: #fafafa;
      border-radius: 4px;
      display: flex;

      .img {
        width: 26px;
        height: 26px;
        margin-top: 16px;
        margin-left: 12px;
      }

      .text2 {
        margin-left: 12px;
        margin-top: 20px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
      }

      .text3 {
        display: flex;
        justify-content: space-around;
        height: 26px;
        background: #ffffff;
        line-height: 26px;
        border: 1px solid #ebecee;
        border-radius: 4px;
        margin-top: 16px;
        margin-left: 12px;

        .text4 {
          margin: 0 10px;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 600;
          color: #333333;

          .text5 {
            color: #2087d0;
          }
        }
      }
    }

    .text6 {
      width: 284px;
      height: 164px;
      background: #fafafa;
      border: 1px solid #ebecee;
      border-radius: 4px;
      margin: 20px 0 0 20px;
      padding: 30px 20px;
      flex-wrap: wrap;

      .text7 {
        .image1 {
          width: 16px;
          height: 16px;
        }
      }

      .text8 {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #999999;
        margin-top: 11px;
        margin-bottom: 18px;

        .text9 {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 600;
          color: #333333;
        }
      }

      .text10 {
        margin-bottom: 0;
      }
    }

    .active {
      background: #9dc8e6;
    }

    .tow1 {
      height: 58px;
      background: #fafafa;
      border-radius: 4px;
      display: flex;

      .img1 {
        width: 26px;
        height: 26px;
        margin-top: 16px;
        margin-left: 12px;
      }

      .text1 {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        margin-left: 12px;
        padding-top: 20px;
      }
    }
  }

  .mychart {
    height: 380px;
    width: 100%;
  }
}

.title3 {
  height: 142px;
  background: #ffffff;
  box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
  border-radius: 8px;
  margin-top: 20px;

  .tex {
    padding-right: 30px;

    .text1 {
      display: flex;
      justify-content: space-between;

      .text2 {
        margin: 40px 30px 26px 30px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;

        .input1 {
          height: 40px;
          background: #ffffff;
          border-radius: 4px;
          margin-left: 12px;
        }
      }

      .bt {
        width: 80px;
        height: 36px;
        background: #ffffff;
        border: 1px solid #666666;
        border-radius: 4px;
        margin-top: 40px;
        margin-left: 14px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }

      .active1 {
        background: #2087d0;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }

  .tex1 {
    display: flex;

    .text1 {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      margin-left: 31px;
    }

    .text2 {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #2087d0;
      margin-left: 785px;
    }
  }

  .tex2 {
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 29px;
  }
}

.flex-button {
  height: 102px;
  line-height: 102px;
}
</style>
